<template>
	<view class="bgff repairs-page">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="问题答疑" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder></u-navbar>
		<view class="form-section">
			<view class="label-row">
				<text class="required">*</text>
				<text class="label-text">内容描述</text>
			</view>
			<textarea class="desc-textarea" v-model="desc" placeholder="请输入您要反馈的内容" :maxlength="3000" auto-height />
		</view>
		<view class="form-section">
			<view class="label-row">
				<text class="label-text">截图(选填)</text>
			</view>
			<view class="img-upload-box" @click="chooseImage">
				<image v-if="img" :src="img" class="img-preview" mode="aspectFill" />
				<view v-else class="img-placeholder">
					<u-icon name="camera" size="48" color="#ccc" />
				</view>
			</view>
		</view>
		<view @tap="submit()" class="w-690 h-88 br-16 fixed rowsc rowsm fs-36 colfff bg"
			style="bottom: 68rpx;left: 30rpx;">
			提交
		</view>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			desc: '',
			img: ''
		}
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.img = res.tempFilePaths[0]
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.repairs-page {
	padding: 0 24rpx;
	min-height: 100vh;
}
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	
	z-index: 1;
}
.form-section {
	margin-top: 32rpx;
}

.label-row {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.required {
	color: #E60012;
	font-size: 28rpx;
	margin-right: 8rpx;
}

.label-text {
	font-size: 28rpx;
	color: #222;
}

.desc-textarea {
	width: 100%;
	min-height: 400rpx;
	background: #f7f7f7;
	border-radius: 16rpx;
	padding: 24rpx;
	font-size: 28rpx;
	color: #333;
	border: none;
	resize: none;
}

.img-upload-box {
	width: 180rpx;
	
	background: #f5f5f5;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 16rpx;
	overflow: hidden;
}

.img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16rpx;
}
</style>